<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body onload="add()">
<div class="bbs">
    <header><span onclick="chuxian()">我要发帖</span></header>
    <section>
        <ul id="a1"></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select ><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="fabu()">
    </div>
</div>
<script type="text/javascript">
	function tu(){
var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
var iNum=Math.floor(Math.random()*4);
var tu=0;
switch(iNum){
	case 0:
	tu=tou[0];
	break;
	case 1:
	tu=tou[1];
	break;
	case 2:
	tu=tou[2];
	break;
	case 3:
	tu=tou[3];
	break;
	default:
	alert("出错了！");
	break;
}
return tu;
}
function add(){
var li=document.createElement("li");
var ul=document.getElementById("a1");
ul.appendChild(li);
li.className="y1";
var div=document.createElement("div");
li.appendChild(div);
div.className="y2";
var img=document.createElement("img");
div.appendChild(img);
img.className="y3";
img.src=tu();

var h1=document.createElement("h1");
div.appendChild(h1);
h1.className="y4";
h1.innerHTML="如何学习web前段开发课程";
var p=document.createElement("p");
li.appendChild(p);
p.className="y5";
var span=document.createElement("span");
p.appendChild(span);
span.className="y6";
var time=new Date();
span.innerHTML="板块！新课来了&nbsp;&nbsp;发表时间："+time;
}
function chuxian(){
document.getElementsByClassName("post")[0].style.display="inline-block";
document.getElementsByClassName("title")[0].value="";
document.getElementsByClassName("content")[0].value="";
//document.getElementsByClassName("title")[0].setAttribute("placeholder","请输入标题（1-50个字符）");
document.getElementsByClassName("title")[0].placeholder="请输入标题（1-50个字符）";
}
function fabu(){
document.getElementsByClassName("post")[0].style.display="none";	
var li=document.createElement("li");
var ul=document.getElementById("a1");
ul.insertBefore(li,ul.firstChild);
li.className="y1";
var div=document.createElement("div");
li.appendChild(div);
div.className="y2";
var img=document.createElement("img");
div.appendChild(img);
img.className="y3";
img.src=tu();

var h1=document.createElement("h1");
div.appendChild(h1);
h1.className="y4";
h1.innerHTML="如何学习web前段开发课程";
var p=document.createElement("p");
li.appendChild(p);
p.className="y5";
var span=document.createElement("span");
p.appendChild(span);
span.className="y6";
var time=new Date();
span.innerHTML="板块！新课来了&nbsp;&nbsp;发表时间："+time;
var a=document.getElementsByClassName("title")[0].value;
h1.innerHTML=a;
var a1=document.getElementsByTagName("select")[0].value;
span.innerHTML="板块!"+a1+"&nbsp;&nbsp;发表时间："+time;
	
}
</script>
</body>
</html>